import React, { useState } from 'react';
import { X } from 'lucide-react';

interface Medal {
  id?: number;
  name: string;
  icon: string;
  description: string;
  requirements: string;
}

interface MedalManageModalProps {
  mode: 'add' | 'edit';
  medal?: Medal;
  onClose: () => void;
  onSave: (data: Medal) => void;
}

const emojiOptions = ['🌟', '🏆', '👑', '⭐', '🔥', '📸', '🎥', '🎯'];

export default function MedalManageModal({
  mode,
  medal,
  onClose,
  onSave
}: MedalManageModalProps) {
  const [formData, setFormData] = useState<Medal>({
    name: medal?.name || '',
    icon: medal?.icon || '🌟',
    description: medal?.description || '',
    requirements: medal?.requirements || ''
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
      <div className="bg-white rounded-lg w-full max-w-2xl mx-4">
        <div className="flex items-center justify-between p-4 border-b">
          <h3 className="text-lg font-semibold text-gray-900">
            {mode === 'add' ? '添加勋章' : '编辑勋章'}
          </h3>
          <button onClick={onClose}>
            <X className="w-6 h-6 text-gray-500" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="p-6">
          <div className="space-y-6">
            {/* 勋章图标 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                勋章图标
              </label>
              <div className="grid grid-cols-8 gap-2">
                {emojiOptions.map(emoji => (
                  <button
                    key={emoji}
                    type="button"
                    onClick={() => setFormData({ ...formData, icon: emoji })}
                    className={`text-2xl p-2 rounded-lg ${
                      formData.icon === emoji
                        ? 'bg-blue-100 ring-2 ring-blue-500'
                        : 'hover:bg-gray-100'
                    }`}
                  >
                    {emoji}
                  </button>
                ))}
              </div>
            </div>

            {/* 勋章名称 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                勋章名称 <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                required
              />
            </div>

            {/* 勋章描述 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                勋章描述
              </label>
              <input
                type="text"
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
            </div>

            {/* 获得条件 */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                获得条件 <span className="text-red-500">*</span>
              </label>
              <textarea
                value={formData.requirements}
                onChange={(e) => setFormData({ ...formData, requirements: e.target.value })}
                rows={3}
                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                required
              />
            </div>
          </div>

          <div className="flex justify-end space-x-3 mt-6">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"
            >
              取消
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
            >
              确定
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}